<template>
  <div class="t-container">
    <div class="t-item">
      <div class="t-title">转速</div>
      <div class="t-content">
        <div class="t-text" v-for="(item, index) in list" :key="index">
          {{ item }}
        </div>
      </div>
    </div>

    <div class="t-item">
      <div class="t-title">ETA预测</div>
      <div class="t-content">
        <div class="t-text" v-for="(item, index) in list" :key="index">
          {{ item }}
        </div>
      </div>
    </div>

    <div class="t-item">
      <div class="t-title">剩余航程油耗预测</div>
      <div class="t-content">
        <div class="t-text" v-for="(item, index) in list" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["文本", "文本", "文本", "文本", "文本", "文本"],
    };
  },
};
</script>

<style lang="less">
// define mixins
.spacing-align {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
}

.d-flex {
  display: flex;
}

// styles
.t-container {
  width: 400px;
  background-color: #ddd;
  font-size: 14px;

  .t-item {
    .d-flex();
    margin: 1px;

    .t-title {
      width: 60px;
      padding: 10px 10px;
      .spacing-align();
      background-color: #666;
    }

    .t-content {
      .d-flex();
      align-items: center;
      flex: 1;
      //   background-color: #fff;

      .t-text {
      }
    }
  }
}
</style>
